<template>
    <div class="comment-item">
        <!-- 评论主体 -->
        <div class="comment-main">
            <el-avatar :size="40" :src="comment.avatar" />
            <div class="comment-content">
                <div class="comment-header">
                    <span class="username">{{ comment.name }}</span>
                    <span class="time">{{ comment.dateTime }}</span>
                </div>
                <div class="comment-text">{{ comment.content }}</div>
                <div class="comment-actions">
                    <el-button link :class="{ 'liked': comment.isLike }" @click="handleLike">
                        <el-icon>
                            <LikeIcon :color="likeColor(comment.isLike)" />
                        </el-icon>
                        <span>{{ comment.likeCount }}</span>
                    </el-button>
                    <el-button link @click="handleReplyToComment">
                        <span>回复</span>
                    </el-button>
                    <el-button v-if="canDelete" link type="danger" @click="handleDelete">
                        <span>删除</span>
                    </el-button>
                </div>
            </div>
        </div>

        <!-- 回复输入框 -->
        <div v-if="showReplyInput" class="reply-input">
            <el-input v-model="replyContent" type="textarea" :rows="2" placeholder="写下你的回复..." />
            <div class="reply-actions">
                <el-button @click="showReplyInput = false">取消</el-button>
                <el-button type="primary" @click="submitReply">回复</el-button>
            </div>
        </div>

        <!-- 回复列表 -->
        <div class="reply-list">
            <ReplyItemComponent v-for="reply in comment.replys" :key="reply.replyId" :reply="reply"
                @delete-reply="handleDeleteReply" @like-reply="handleLikeReply" @reply-to-reply="handleReplyToReply" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import type { CommentDisplayDto } from '@/types/commentType';
import ReplyItemComponent from './ReplyItemComponent.vue';
import LikeIcon from '@/icons/likeIcon.vue';
import { getUserInfo } from '@/utils/persistUtils';

const props = defineProps<{
    comment: CommentDisplayDto
}>();

const likeColor = (isLike: boolean) => {
    return isLike ? "#1296db" : "#8a8a8a";
}

const emit = defineEmits<{
    'delete-comment': [commentId: number]
    'submit-reply': [commentId: number, content: string, replyId?: number]
    'like-comment': [commentId: number, isLike: boolean]
    'delete-reply': [replyId: number]
    'like-reply': [replyId: number, isLike: boolean]
}>();

const showReplyInput = ref(false);
const replyContent = ref('');

const curReplyUserId = ref(-1);

const canDelete = computed(() => {
    return props.comment.userId === getUserInfo().id;
});

// 处理点赞
const handleLike = () => {
    emit('like-comment', props.comment.commentId, props.comment.isLike);
};

// 处理删除
const handleDelete = () => {
    emit('delete-comment', props.comment.commentId);
};

// 提交回复
const submitReply = () => {
    if (!replyContent.value.trim()) return;

    emit('submit-reply',
        props.comment.commentId,
        replyContent.value,
        curReplyUserId.value > -1 ? curReplyUserId.value : null
    );
    replyContent.value = '';
    showReplyInput.value = false;
};

const handleReplyToComment = () => {
    showReplyInput.value = true;
    curReplyUserId.value = -1;
}

// 处理回复的回复
const handleReplyToReply = (replyId: number) => {
    showReplyInput.value = true;
    curReplyUserId.value = replyId;
    // 可以在这里设置默认的回复文本，如：@用户名
};

// 处理删除回复
const handleDeleteReply = (replyId: number) => {
    // TODO: 实现删除回复的逻辑
    emit('delete-reply', replyId);
};

// 处理回复点赞
const handleLikeReply = (replyId: number, isLike: boolean) => {
    // TODO: 实现回复点赞的逻辑
    emit('like-reply', replyId, isLike);
};
</script>

<style scoped>
.comment-item {
    margin-bottom: 20px;
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.comment-main {
    display: flex;
    gap: 12px;
}

.comment-content {
    flex: 1;
}

.comment-header {
    margin-bottom: 8px;
}

.username {
    font-weight: bold;
    margin-right: 10px;
}

.time {
    color: #999;
    font-size: 12px;
}

.comment-text {
    margin-bottom: 8px;
    line-height: 1.5;
}

.comment-actions {
    display: flex;
    gap: 15px;
}

.liked {
    color: #409EFF;
}

.reply-input {
    margin: 10px 0 10px 52px;
}

.reply-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    gap: 10px;
}

.reply-list {
    margin-left: 52px;
    margin-top: 10px;
}
</style>
